<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Maxxiz (FRom Ariyan.org) Responsive Blogger Template Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Description">
    <meta name="author" content="Autor">
    
    <!-- loading the css -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <style type="text/css">
    body {
        padding-bottom: 40px;
    }

    section {padding: 60px 0 0 0;}
    </style>

        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->

          <!-- Various Icons (Favicon, Touch Icon,... -->
          <link rel="shortcut icon" href="assets/img/favicon.ico">
          <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
          <link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.png">
          <link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.png">

      </head>



      <body data-spy="scroll" data-target=".navbar" id="top">

        <!-- ========================= NAVIGATION BAR >> START ========================= -->
        <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> 
                    <a class="brand" href="#overview">Maxxiz Documentation</a><!-- TIP: Change this for the name of your file -->
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="#overview">Overview</a></li>

                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">Getting started<b class="caret"></b></a>
                                <ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
                                    <li><a href="#getting_started">Getting Started</a></li>
                                        <li><a href="#getting_started_installation">Installation</a></li>
                                            <li><a href="#getting_started_activating_theme_options">Default Setting</a></li>
                                <li><a href="#getting_started_importing_demo_contet">Layout Explain</a></li>                            
                                        <li><a href="#getting_started_setting_up_the_menu">Setting up the menu</a></li>
										<li><a href="#getting_started_setting_up_the_secial_icon">Setting Social Icon</a></li>	
                                            </ul>

                                        </li> 
                                <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop2" href="#creating_content_post_pages_and_portfolio">Creating Content<b class="caret"></b></a>
                                    <ul aria-labelledby="drop2" role="menu" class="dropdown-menu">                                      
                                            <li><a href="#creating_content_manual_slide">Featured Post (Manual/Auto)</a></li> 
											<li><a href="#creating_content_post_labels">Post by Label</a></li>
											<li><a href="#creating_error_pages">Error Page</a></li> 
											    </ul>
                                            </li>
                                 <li class="dropdown">
                                                <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop3" href="#shortcodes_widgets">Widget Setting<b class="caret"></b></a>
                                    <ul  aria-labelledby="drop3" role="menu" class="dropdown-menu">
										<li><a href="#sumloadmore">Summary and Load More</a></li>
										<li><a href="#pagenavi">Page Navigation</a></li>
                                        <li><a href="#recentcommentwidgets">Recent Comments</a></li>
                                            <li><a href="#jsonresultwidget">JSON Search result</a></li>
                                                <li><a href="#emoticon">Emoticon</a></li>
												<li><a href="#related_post">Related Post</a></li>
												<li><a href="#newsticker">News Ticker</a></li>												
                                                </ul>
                                            </li>
                                                        <li class="dropdown">
                                                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop3" href="#shortcodes_widgets">Customization<b class="caret"></b></a>
                                                            <ul aria-labelledby="drop3" role="menu" class="dropdown-menu">                                                                
                                                                <li><a href="#theme_customizer">Theme Customizer</a></li>                                                              
                                                            </ul>
                                                        </li>




                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <!-- ========================= NAVIGATION BAR >> END ========================= -->



                                                            <!-- ========================= MAIN CONTAINER >> START ========================= -->
                                                            <div class="container">

                                                                <!-- ========================= SECTION: OVERVIEW >> START ========================= -->
                                                                <section id="overview">

                                                                    <div class="hero-unit">
                                                                        <h1>Maxxiz Blogger Documentation</h1>
                                                                        <p>Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a target="_blank" href="http://themeforest.net/user/satankmkr">here</a>. Thanks so much! </p>
                                                                        <div class="row-fluid">
                                                                            <div class="span3"><a target="_blank" href="http://themeforest.net/user/satankmkr" class="btn btn-inverse btn-large btn-block">Contact Form</a></div>
                                                                            <div class="span3"><a href="#changelog" role="button" class="btn btn-success btn-large btn-block" data-toggle="modal">Changelog</a></div>
                                                                            <div class="span3"><a href="#credits" role="button" class="btn btn-info btn-large btn-block" data-toggle="modal">Credits</a></div>
                                                                        </div>

                                                                    </div>

                                                                    <hr>

                                                                    <div class="row-fluid">
                                                                        <div class="span6">
                                                                            <table width="100%">
                                                                                <tr>
                                                                                    <td>Author:</td>
                                                                                    <td><a href="http://themeforest.net/user/satankmkr/">satankmkr</a></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Demo :</td>
                                                                                    <td><a href="http://maxxiz-mkrdezign.blogspot.com/">Maxxiz Demo Page</a></td>
                                                                                </tr>																				
                                                                            </table>
                                                                        </div>
                                                                        
                                                             
                                                                        <div class="span6">
                                                                            <table width="100%">
                                                                                <tr>
                                                                                    <td>Created:</td>
                                                                                    <td>2013-08-06</td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Modified:</td>
                                                                                    <td>2013-08-13</td>
                                                                                </tr>
                                                                                 <tr>
                                                                                    <td>Current Version:</td>
                                                                                    <td>1.1</td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Documentation Version</td>
                                                                                    <td>1.1</td>
                                                                                </tr>
                                                                            </table>
                                                                        </div>
                                                                    </div>

                                                                    <hr>

                                                                </section>
                                                                <!-- ========================= SECTION: OVERVIEW >> END ========================= -->



                                                                <!-- ========================= SECTION: MARKUP >> START ========================= -->
                                                                <section id="getting_started">
                                                                    <div class="page-header">
                                                                        <h1>Getting started</h1>
                                                                    </div>

                                                                    <p>I assume you have a blogger account, so let&#39;s get started!</p>
                                                                    <hr />

                                                                    <h3 id="getting_started_installation">Installation</h3>
                                                                    <p>
                                                                        You can do it by follow this step:
                                                                    </p> <div class="row">																	
                                                                    <ol>
                                                                        <li>
                                                                            Unzip the <strong>&ldquo;Maxxiz-theme.zip&rdquo;</strong> file.
                                                                        </li>
                                                                        <li>
                                                                            On Blogger Dashboard Click <strong class="template">Template</strong>.
                                                                        </li>
																		<li>
                                                                            Click <strong class="buttonx">Backup/Restore</strong> button (Top Right).
                                                                        </li>
																		<li>
                                                                            Click <strong class="choose">Choose File</strong> button. Find where the <strong>&ldquo;Maxxiz-theme.xml&rdquo;</strong> file location.
                                                                        </li>
																		<li>
                                                                            Then Click <strong class="buttonorg">Upload</strong>.
                                                                        </li>
                                                                    </ol>
																	<p><span style="color:red;font-weight:bold">NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work</span></p><br/>
																	<p><img class="img-polaroid" src="assets/install.jpg" /> </p>
                                                                    </div>


                                                                    <hr />
                                                                    <div class="row">
                                                                       
                                                                            <div class="page-header"><h3 id="getting_started_activating_theme_options">Default Setting</h3></div>
                                                                            <p>
                                                                                After installing the theme, this it the minimun setting to make all widget works fine in this themes.
                                                                            </p>

                                                                        <div class="span3"><p><h4>Embedded Comment</h4>
																		This to make comment area like the Demo and make Emoticon show
																		<ol><li>On Blogger Dashboard Click <strong class="setting">Setting</strong>.</li>
																		<li>Click <strong class="orange">Posts and Comments</strong></li>
																		<li>in Comment Location Choose <strong class="buttonx">Embedded</strong></li>
																		<li>Then Click <strong class="buttonorg">Save settings</strong>.</li>
																		</ol></p></div>
                                                                        <div class="span9"><p><img class="img-polaroid" src="assets/comment.jpg" /></p></div>
																		<div class="span3"><p><h4>Blog Feed</h4> 
																		This to make recent comment, Search Result, Auto Featured Post, and Post by Label work fine
																		<ol><li>On Blogger Dashboard Click <strong class="setting">Setting</strong>.</li>
																		<li>Click <strong class="orange">Other</strong></li>
																		<li>in Site Feed <i class=" icon-chevron-right"></i> Allow Blog Feed Choose <strong class="buttonx">Full</strong> Or <strong class="buttonx">Short</strong> </li>
																		<li>Then Click <strong class="buttonorg">Save settings</strong>.</li>																		
																		</ol>
																		<span style="color:red">NB:<br/>
																		1. If yours post have image uploaded on blogspot you can choose <strong>SHORT</strong>. but if yours post just have image from third party image hosting you must choose <strong>Full</strong><br/>
																		2. Blogger feed must be not redirect to other feed site like Feedburner<br/>
																		3. Your's blog or website not Private</span>
																		</p></div>
                                                                        <div class="span9"><p><img class="img-polaroid" src="assets/other.jpg" /></p></div>
                                                                    </div>
																	<div class="row">
                                                                    <div class="page-header"><h3 id="getting_started_importing_demo_contet">Layout Explain</h3></div>
                                                                        <div class="span3">
																		<ol>
																		<li>Right Header Widget Area(Ads 468x60)</li>
																		<li>Featured Post Area</li>
																		<li>Top Sidebar Area</li>
																		<li>Middle Sidebar Area<br/>
																		a. Popular Post<br/>
																		b. Recent Comment <br/>
																		c. Archive Widget</li>	
																		<li>Bottom Sidebar Area</li>
																		<li>Label Post Widget Area</li>
																		<li>Footer Widget Area</li>	
																		<li>Manual Featured Post Area (work with Image Widget)</li>	
																		<li>Left Sidebar Area</li>																			
																		</ol>
																		</div>
																		 <div class="span9">
																		 <p><img class="img-polaroid" src="assets/layouts.png" /></p>
																		 </div>
																		</div>
                              
                    <div class="page-header"><h3 id="getting_started_setting_up_the_menu">Setting up the menu</h3>
					<img src="assets/menu2.png" class="img-polaroid"/><br/><br/><br/>
					<img src="assets/menu1.png" class="img-polaroid"/><br/><br/>
                        <p>
                            To Edit Menu in this theme you can follow this step:
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>(Top Menu) Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint html">&lt;ul class=&#39;sf-menu&#39; id=&#39;topmenunav&#39;&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;More&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 <li>(Middle Menu) Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;ul class=&#39;sf-menu&#39; id=&#39;menunav&#39;&gt;
  &lt;li&gt;&lt;a class=&#39;home&#39; expr:href=&#39;data:blog.homepageUrl&#39;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Archive&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Comments&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;With Sub Menu&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Sub Menu&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Error 404&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 </li>
						 <li>Change # with yours URL link</li>
						 </ol>	                                                    
      					
						</div>               
<div class="page-header"><h3 id="getting_started_setting_up_the_secial_icon">Setting Social Icon</h3></div>
 <img src="assets/socialicon.png" class="img-polaroid"/><br/><br/>
                        <p>
                            To Edit Social Icon in this theme you can follow this step:
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;ul class=&#39;sociico&#39; id=&#39;icon-socialmn&#39;&gt;
  &lt;li class=&#39;sotw&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;twitter&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sofb&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;facebook&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sogo&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;google&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sorss&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;rss&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;solinkn&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;linkedin&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sodrib&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;dribbble&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sopint&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;pinterest&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 </li>
						 <li>Change # with yours Social URL link</li>
						 </ol>	                                                    
      					
						</div>

              </section>
              <!-- ========================= SECTION: MARKUP >> END ========================= -->


              <section id="creating_content_post_pages_and_portfolio">
                <div class="page-header">
                    <h1>Creating Content<small> Featured Post, Vertical Label Post, Horizontal Label Post, Slider Label Post and Error Page</small></h1>
                </div>                
				<div class="page-header">
                        <h3 id="creating_content_manual_slide">Manual Slide Show (Using Image Widget) OR Auto Featured Post (Slide Show From JSON Feed)</h3>
                    </div>
					<div class="row"> 
<div class="span6">
					<img class="img-polaroid" src="assets/featuredpost.png"/>
					</div>					
					<div class="span6"><h4>Manual Slide Show</h4>
                    To Create Manual Slide Show follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>On Manual Slideshow Widget Area Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose Image Widget</li>
									<li><img src="assets/imagewidget.png"/><br/><br/>
									<ol>
									<li>Fill With Image Title</li>
									<li>Image Description</li>
									<li>Link When Image or Title Click</li>
									<li>Search Yours Image</li>
									<li>Uncheck shrink to fit</li>
									</ol><br/><br/>
									<strong>NB</strong> : Recommended Image Size 517px x 250px<br/>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>									
                                <li>If You Whan Show 5 image, do this step 5 times (Image Widget must be not more than 5 times because if more than 5 times Slideshow CSS must be change to make it looks good)</li>
								</ol>								
</div>										
					</div>	
<hr/>					
					<div class="row"> 
<div class="span6">
					<img class="img-polaroid" src="assets/featuredpost.png"/>
					</div>					
					<div class="span6"><h4>Auto Featured Post (Slide Show From JSON Feed)</h4>
                     To add Featured Post widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;featpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#featpost&quot;).AutofeaturedPost({
MaxPost:5
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
                                </ol>	
<span style="color:red"><b>NB:</b> MaxPost should be not more than 5 Post (because if more than 5 post Slideshow CSS must be change to make it looks good)</span>							
</div>
										</div>
					<div class="row"> 
<p>(Default) Complete Javascript to call Auto Featured Post like this code:
								<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).AutofeaturedPost({
blogURL: &quot;&quot;,
MaxPost: 5,
ImageSize: 650,			
Summarylength: 100,					
RandompostActive: true,			
pBlank: &quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;,
tagName: false
});</pre></p>					
					<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number artikel will show on Featured Post</td>
                                        </tr>
                                        <tr>
                                            <td>Summarylength</td>
                                            <td>Number of summary characters to show.</td>
                                        </tr>                                        
                                        <tr>
                                            <td>ImageSize</td>
                                            <td>Post Image size (in pixel)</td>
                                        </tr>
                                        <tr>
                                            <td>RandompostActive</td>
                                            <td>default <i>true</i>. It's will show article ramdomly. If want to show Recent Post just change to <i>false</i> </td>
                                        </tr>                                        
                                        <tr>
                                            <td>pBlank</td>
                                            <td>Backup image if post don't have image store on blogspot or picasa web</td>
                                        </tr>                                        
                                        <tr>
                                            <td>tagName</td>
                                            <td>If you want to show Featured Post by the Label. Example: to show featured post from <i>Sports</i> Label just write like this <i>tagName:&quot;Sports&quot;</i></td>
                                        </tr>                                      
                                    </tbody>
                                </table> 
				
				</div>
				 <div class="page-header">
                        <h3 id="creating_content_post_labels">Post by Label (Slider, Horizontal and Vertical Post)</h3>
                    </div>
					<div class="row"> 
<div class="span6">
					<img class="img-polaroid" src="assets/recentslide.png"/>
					</div>					
					<div class="span5"><h4>Slider Post</h4>
                    To add Post by Label (Slider Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;webdespost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#webdespost&quot;).RecentPostbyTag({
postType:&quot;s&quot;,
MaxPost:5,
ImageSize:&quot;s200-p&quot;,
tagName:&quot;Web Design&quot;
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>&quot;Web Design&quot;</i> mean will display artikel from <i>Web Design</i> label. 
									</li>
                                </ol>								
</div>					
					</div>
					<hr/>
					<div class="row"> 	
<div class="span6">
					<img class="img-polaroid" src="assets/recentvertical.png"/>
					</div>					
					<div class="span6"><h4>Vertical Post</h4>
                    To add Post by Label (Vertical Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;musicpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#musicpost&quot;).RecentPostbyTag({
postType:&quot;v&quot;,
MaxPost:4,
tagName:&quot;Music&quot;
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>&quot;Music&quot;</i> mean will display artikel from <i>Music</i> label.</li>
                                </ol>								
</div>
					
					</div>
					<hr/>
					<div class="row"> 	
<div class="span6">
					<img class="img-polaroid" src="assets/recenthoris.png"/>
					</div>					
					<div class="span6"><h4>Horizontal Post</h4>
                    To add Post by Label (Horizontal Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;sportpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#sportpost&quot;).RecentPostbyTag({
postType:&quot;h&quot;,
MaxPost:4,
tagName:&quot;Motion Design&quot;
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>&quot;Motion Design&quot;</i> mean will display artikel from <i>Motion Design</i> label.</li>
                                </ol>								
</div>
					
					</div><br/><br/>
					<div class="row">
					
<p><span>Slider, Horizontal Post and Vertical Post use by one Javascript Script and You can see Default Code to Call this Plugin look like below:</span>:
								<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).RecentPostbyTag({
blogURL: &quot;&quot;,
MaxPost: 4,
FirstImageSize:&quot;s220-p&quot;,
ImageSize: &quot;s80-p&quot;,			
Summarylength: 100,
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
Slidespeed: 4,
MoreText: &quot;View All About&quot;,
MoreNumPost: 6,					
postType: &quot;v&quot;,		
pBlank: &quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;,
MonthNames: [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
tagName: false
});</pre></p>					
					<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load JSON where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number of article will be show</td>
                                        </tr>
                                        <tr>
                                            <td>Summarylength</td>
                                            <td>Number of summary characters to show.</td>
                                        </tr>                                       
                                        <tr>
                                            <td>ImageSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br/>
											To make square image (200x200) Image Format use like this &quot;s200-c&quot; or &quot;s200-p&quot;. image will be crop to make it square.<br/>
											Blogspot Image format also look like this : &quot;s200&quot; (if image landscape width will 200px. If image Portrait height will 200px), &quot;w200&quot; (image width will 200px) or &quot;h200&quot; (image height will 200px)
											</td>
                                        </tr>
                                        <tr>
                                            <td>FirstImageSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br/>
											To make square image (200x200) Image Format use like this &quot;s200-c&quot; or &quot;s200-p&quot;. image will be crop to make it square.<br/>
											Blogspot Image format also look like this : &quot;s200&quot; (if image landscape width will 200px. If image Portrait height will 200px), &quot;w200&quot; (image width will 200px) or &quot;h200&quot; (image height will 200px)
											</td>
                                        </tr>
										<tr>
                                            <td>ShowDesc</td>
                                            <td>To Show All Description (Just Work on Horizontal and Vertical PostType). Default is <i>false</i></td>
                                        </tr>
										<tr>
                                            <td>ShowDate</td>
                                            <td>To Show Date: Default is <i>true</i></td>
                                        </tr> 
										<tr>
                                            <td>ShowComment</td>
                                            <td>To show Comment: Default is <i>true</i> (Just Work on Horizontal and Vertical PostType).</td>
                                        </tr> 
										<tr>
                                            <td>Random</td>
                                            <td>To Make Random Post: Default is <i>false</i>.</td>
                                        </tr> 
										<tr>
                                            <td>Slidespeed</td>
                                            <td>Animation Speed if PostType is Slider Post .</td>
                                        </tr>
										<tr>
                                            <td>postType</td>
                                            <td>There are Three kind of PostType: &quot;v&quot; (vertical Post), &quot;h&quot; (horizontal Post) and &quot;s&quot; (Slider Post)</td>
                                        </tr> 
										<tr>
                                            <td>MoreText</td>
                                            <td>More Button Text. Will show if postType is Vertical or Horizontal and TagName is setup</td>
                                        </tr> 	
										<tr>
                                            <td>MoreNumPost</td>
                                            <td>Number post will show if MoreText button Click. If yours theme use PageNavigation this Number must be same with <b>postperpage</b> number</td>
                                        </tr> 										
                                        <tr>
                                            <td>pBlank</td>
                                            <td>Backup image if post don't have image</td>
                                        </tr>
                                        <tr>
                                            <td>MonthNames</td>
                                            <td>Format months name</td>
                                        </tr>
                                        <tr>
                                            <td>tagName</td>
                                            <td>If you want to show Post by the Label. Example: to show post from <i>Sports</i> Label just write like this <i>tagName:&quot;Sports&quot;</i></td>
                                        </tr>                                      
                                    </tbody>
                                </table> 
				
				</div>
					<div class="creating_error_pages"><h2 id="creating_error_pages">Error Page</h2></div>
					<hr/>
                        <div class="row">
						<div style="text-align:center">
						<img src="assets/error404.png" class="img-polaroid"/></div>
						<br/><br/>
						<p>To change text on Error Page follow this step</p>
                            <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;div class=&#39;error-custom&#39;&gt;

&lt;h2&gt;404 Not Found&lt;/h2&gt;
&lt;p class=&#39;error-body&#39;&gt;We&amp;#39;re sorry but we could not find the page you are looking for.&lt;br/&gt;
This may happen if you have entered site url incorrectly or this page doesn&amp;#39;t exist anymore.&lt;/p&gt;

&lt;p&gt;You can try searching page again or go back to home&lt;/p&gt;

&lt;form action=&#39;/search&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt;
&lt;input id=&#39;s&#39; name=&#39;q&#39; onblur=&#39;if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Search...&amp;quot;;}&#39; onfocus=&#39;if (this.value == &amp;quot;Search...&amp;quot;) {this.value = &amp;quot;&amp;quot;;}&#39; type=&#39;text&#39; value=&#39;Search...&#39;/&gt;
&lt;input id=&#39;searchsubmit&#39; type=&#39;submit&#39; value=&#39;Go&#39;/&gt;
&lt;/form&gt;

&lt;/div&gt;</pre>
						 </li>
						 <li>Change which your's Language</li>
						 </ol>	
                       </div>				
                </section>
                <section id="shortcodes_widgets">
                    <div class="page-header">
                        <h1 id="shortcodes">Widgets<small> Configuration</small></h1>
                    </div>
					<div class="page-header"><h2 id="sumloadmore">Summary, Page Navigation, Load More and View Mode</h2></div>					
                        <div class="row"><h3>Summary, Page Navigation and Load More</h3>
						<div class="span6">                               
								 <img class="img-polaroid" src="assets/sumarry.png" /><br/><br/>
<p>								 
                           <h5> (Default) Complete Javascript to setup view mode like this code:</h5>
						 <pre class="prettyprint js">viewMode({
viewmodedefault:&quot;list&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;
});</pre>
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button.</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button.</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table>
								
 <h5>(Default) Complete Javascript to setup Page Navigation like this code: </h5>
						 <pre class="prettyprint js">pageNavi({
postperpage:6,
numshowpage:3,
previous:&quot;&amp;#171;&quot;,
next:&quot;&amp;#187;&quot;,
LatestText:&quot;Latest Post&quot;
});</pre>
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									 <tr>
                                            <td>postperpage</td>
                                            <td>Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting</td>
                                        </tr>
                                        <tr>
                                            <td>numshowpage</td>
                                            <td>Number Page Number will Show</td>
                                        </tr> 
										<tr>
                                            <td>LatestText</td>
                                            <td>Latest text/word. This will work if Page Number not 1</td>
                                        </tr> 
										<tr>
                                            <td>previous</td>
                                            <td>previous text/word.</td>
                                        </tr> 
										<tr>
                                            <td>next</td>
                                            <td>next text/word. </td>
                                        </tr> 
                                    </tbody>
                                </table>
	</p>						
							</div>
                            <div class="span6"><h4>Summary</h4>
							To change image size and Summary length follow this step.
                                <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint html">var configSummary = {
    thumbnailSize: &quot;s140-p&quot;, // Define the post thumbnail size
    summaryLength: 300, // Define the summary length  
	BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image   
};</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br/>
											To make square image (200x200) Image Format use like this &quot;s200-c&quot; or &quot;s200-p&quot;. image will be crop to make it square.<br/>
											Blogspot Image format also look like this : &quot;s200&quot; (if image landscape width will 200px. If image Portrait height will 200px), &quot;w200&quot; (image width will 200px) or &quot;h200&quot; (image height will 200px)
											</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr>                                     
                                      <tr>
                                            <td>BackupImage</td>
                                            <td>URL Backup image if post don't have image</td>
                                        </tr>  
                                    </tbody>
                                </table> 					 
                                    </li>
                                </ol>
								<h4>Page Navigation</h4>
								To edit Page Navigation, change Number Post PerPage and Number Show Page Number follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">pageNavi({
postperpage:6,
numshowpage:3,
LatestText:&quot;Latest Post&quot;
});</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>postperpage</td>
                                            <td>Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting</td>
                                        </tr>
                                        <tr>
                                            <td>numshowpage</td>
                                            <td>Number Page Number will Show</td>
                                        </tr> 
										<tr>
                                            <td>LatestText</td>
                                            <td>Latest Text. This will work if Page Number not 1</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table> 							
                                    </li>
                                </ol>
								<h4>View Mode</h4>
								To edit View Mode from Grid mode to List Mode follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">viewMode();</pre>
						 (Default) Complete Javascript to setup view mode like this code:
						 <pre class="prettyprint js">viewMode({
viewmodedefault:&quot;list&quot;
});</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode</td>
                                        </tr>                                       										
                                     
                                    </tbody>
                                </table> 							
                                    </li>
                                </ol>
                            </div>
                          
<h4>Load More Post</h4>
								If You want to change Page Navigation with Load More Text follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						<pre class="prettyprint js">pageNavi({
postperpage:6,
numshowpage:3,
LatestText:&quot;Latest Post&quot;
});</pre>
and change with:
						<pre class="prettyprint js">loadMorePost ({
thumbnailSize:&quot;s140-p&quot;,
summaryLength:300,
MoreText:&quot;Load more posts&quot;
});</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>thumbnailSize</td>
                                            <td>Define the post thumbnail size</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr> 
										<tr>
                                            <td>MoreText</td>
                                            <td>Load more text to display: default: &quot;Load more posts&quot;</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table> 
<p class="note">image size and summary length on summary script and Load more script must have same value</p>								
                                    </li>
                                </ol>	
<h5>(Default) Complete Javascript to setup Load More Post like this code: </h5>
						 <pre class="prettyprint js">loadMorePost({
thumbnailSize:&quot;s140-p&quot;,
summaryLength:300,
MoreText:&quot;Load more posts&quot;,
viewmodedefault:&quot;list&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;,
BackupImage:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;
});</pre>
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									 <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br/>
											To make square image (200x200) Image Format use like this &quot;s200-c&quot; or &quot;s200-p&quot;. image will be crop to make it square.<br/>
											Blogspot Image format also look like this : &quot;s200&quot; (if image landscape width will 200px. If image Portrait height will 200px), &quot;w200&quot; (image width will 200px) or &quot;h200&quot; (image height will 200px)
											</td>
                                        </tr>
										 <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr>
										 <tr>
                                            <td>MoreText</td>
                                            <td>Load more text to display: default: &quot;Load more posts&quot;</td>
                                        </tr>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode (make it same setting with view mode javascript)</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript)</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript)</td>
                                        </tr> 										
                                     <tr>
                                            <td>BackupImage</td>
                                            <td>Backup image if post don't have image.</td>
                                        </tr> 
                                    </tbody>
                                </table>								
							</div>													
                       
					<div class="page-header"><h2 id="recentcommentwidgets">Recent Comments</h2></div>
                        <div class="row">
                            <div class="span4">
							<img class="img-polaroid" src="assets/reccomment.png" />                               
                            </div>
                            <div class="span8">
							To add recent comments widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;rcentcomnets&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#rcentcomnets&quot;).RecentComments();
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
                                </ol>
								<p>(Default) Complete Javascript to call Recent Comments like this code:
								<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).RecentComments({
blogURL:&quot;&quot;,
numComments:4,
characters:100,
avatarSize:50,
Showimage:true,
defaultAvatar:&quot;http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png&quot;,
MonthNames:[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;],
maxfeeds:50,
adminBlog:&quot;&quot;
});</pre>
								<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>numComments</td>
                                            <td>maximum number of recent comment</td>
                                        </tr>
                                        <tr>
                                            <td>characters</td>
                                            <td>Number of summary characters to show. if set 0, will not show summary</td>
                                        </tr>                                        
                                        <tr>
                                            <td>avatarSize</td>
                                            <td>Image thumbnail size/avatar size</td>
                                        </tr>                                       
                                        <tr>
                                            <td>Showimage</td>
                                            <td>Show or hide the avatar. Value : true or false</td>
                                        </tr>
                                        <tr>
                                            <td>defaultAvatar</td>
                                            <td>Backup image if comment author don't have avatar image</td>
                                        </tr>
                                        <tr>
                                            <td>MonthNames</td>
                                            <td>Format month name</td>
                                        </tr>
                                        <tr>
                                            <td>maxfeeds</td>
                                            <td>Maximum feed to load</td>
                                        </tr>
                                      <tr>
                                            <td>adminBlog</td>
                                            <td>Control to show or hide author/admin comment. ex: if you don't want to show your comment, simply just write yours blogger name like this adminBlog:"satank MKR" </td>
                                        </tr>
                                    </tbody>
                                </table> 
								</p>
                            </div>
                       </div>
                             
							 <div class="page-header"><h2 id="jsonresultwidget">JSON Search Result</h2></div>
                        <div class="row">
                            <div class="span4">
							<img class="img-polaroid" src="assets/searchresult.png" />                               
                            </div>
                            <div class="span8">
							To edit JSON Search Result Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">searchxx({summaryLength:100, scrthumbSize:50});</pre></li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
								<p>(Default) Complete Javascript to call JSON Search Result like this code:
								<pre class="prettyprint html">searchxx({
blogURL:&quot;&quot;,
srcBlank:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif&quot;,
findText:&quot;Search results for keyword&quot;,
NotfindText:&quot;No result!&quot;,
Showthumb:true,
LoadingText:&quot;Searching...&quot;,
summaryLength:100, 
scrthumbSize:50
});</pre>
								<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>srcBlank</td>
                                            <td>Backup image if post don't have image</td>
                                        </tr>
                                        <tr>
                                            <td>findText</td>
                                            <td>Sentence if founded post by the keyword</td>
                                        </tr>
                                        <tr>
                                            <td>NotfindText</td>
                                            <td>Text if no post founded</td>
                                        </tr>
										<tr>
                                            <td>Showthumb</td>
                                            <td>Show or hide the post thumbnail. Value : true or false</td>
                                        </tr>                                        
                                        <tr>
                                            <td>LoadingText</td>
                                            <td>Text to show went searching</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Length of summary characters</td>
                                        </tr>
                                        <tr>
                                            <td>scrthumbSize</td>
                                            <td>Size of thumbnail image, size in pixel</td>
                                        </tr>                                        
                                    </tbody>
                                </table> 
								</p>
                            </div>
                       </div>

                        <div class="page-header"><h2 id="emoticon">Emoticon</h2></div>
                        <div class="row">
                            <div class="span6">
							<img class="img-polaroid" src="assets/emoticon.png" />                               
                            </div>
                            <div class="span6">
							To edit Emoticon Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">emoticonx({
emoRange:&quot;#comments p, div.emoWrap&quot;,
putEmoAbove:&quot;iframe#comment-editor&quot;,
topText:&quot;Click to see the code!&quot;,
emoMessage:&quot;To insert emoticon you must added at least one space before the code.&quot;
});</pre>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>emoRange</td>
                                            <td>Where the emoticon will show/work</td>
                                        </tr>
                                        <tr>
                                            <td>putEmoAbove</td>
                                            <td>Where the emoticon sample will place</td>
                                        </tr>
                                        <tr>
                                            <td>topText</td>
                                            <td>Sentence below the emoticon sample</td>
                                        </tr>
                                        <tr>
                                            <td>emoMessage</td>
                                            <td>Sentence below the emoticon sample and alert box</td>
                                        </tr>										                                        
                                    </tbody>
                                </table> 
								
                            </div>
                       </div>
<div class="page-header"><h2 id="related_post">Related Post</h2></div>
                        <div class="row">
                            <div class="span6">
							<img class="img-polaroid" src="assets/relatedpost.png" />                               
                            </div>
                            <div class="span6">
							To edit Emoticon Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">relatedPostsWidget();</pre>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
							<p>(Default) Complete Javascript to call Related Post like this code:
								<pre class="prettyprint html">relatedPostsWidget({
blogURL:&quot;&quot;,
maxPosts:5,
maxTags:5,
maxPostsPerTag:5,
rlt_summary:100,
rlt_thumb:50,
relatedTitle:&quot;Related Posts&quot;,
recentTitle:&quot;Recent Posts&quot;,
readMoretext:&quot;[...]&quot;,
rlpBlank:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif&quot;
});</pre>	
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>maxPosts</td>
                                            <td>Maximum number of article will be show (if Related Post)</td>
                                        </tr>
                                        <tr>
                                            <td>maxTags</td>
                                            <td>Maximum Tag/Label will load</td>
                                        </tr>
                                        <tr>
                                            <td>maxPostsPerTag</td>
                                            <td>Maximum post each tag/label will be show (maximum recent post if article don't have tag/label)</td>
                                        </tr>
										<tr>
                                            <td>rlt_summary</td>
                                            <td>Length of summary characters</td>
                                        </tr>                                        
                                        <tr>
                                            <td>rlt_thumb</td>
                                            <td>Size of thumbnail image, size in pixel</td>
                                        </tr>
                                        <tr>
                                            <td>relatedTitle</td>
                                            <td>Title if article have related post</td>
                                        </tr>
                                        <tr>
                                            <td>recentTitle</td>
                                            <td>Title if article don't have related post (will be load recent post)</td>
                                        </tr>
										<tr>
                                            <td>readMoretext</td>
                                            <td>Read More Text </td>
                                        </tr>
										<tr>
                                            <td>rlpBlank</td>
                                            <td>Backup image if post don't have image</td>
                                        </tr>																				
                                    </tbody>
                                </table> 
								
                            </div>
                       </div>
<div class="page-header"><h2 id="newsticker">News Ticker</h2></div>
                        <div class="row">						
							<img class="img-polaroid" src="assets/newsticker.png" /> 						
                        <br/> 
							To edit News Ticker Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">&lt;script type=&#39;text/javascript&#39;&gt;
//&lt;![CDATA[
NewsTicker({MaxPost:8});
//]]&gt;
&lt;/script&gt;</pre><br/>
						 (Default) Complete Javascript to call News Ticker like this code:<br/>
						 <pre class="prettyprint js">NewsTicker({
blogURL:&quot;&quot;,
MaxPost:8,
titleText:&quot;Latest News&quot;,
MonthNames:[&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
tagName: false
});</pre>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number artikel will show on News Ticker</td>
                                        </tr>                                        
                                        <tr>
                                            <td>titleText</td>
                                            <td>News Ticker Title Text</td>
                                        </tr>	
										<tr>
                                            <td>MonthNames</td>
                                            <td>Month Name Format</td>
                                        </tr>
										<tr>
                                            <td>tagName</td>
                                            <td>If you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"</td>
                                        </tr>										
                                    </tbody>
                                </table> 
								
                        
                       </div>					   
                        </section>                      


                        <section id="theme_customizer">
                            <div class="page-header"><h3>Theme Customizer</h3></div>
                            <p>It's Easy to customize this themes. Just Go to Blogger Dashbord and Click <strong class="template">Template</strong> then Click <strong class="buttonorg">Customize</strong> and Click Advanced<br/>
							<span style="color:red"><strong>NB :</strong> Blogger Customize will work if Blogger Mobile Template <strong>Enabled</strong> before upload this Theme</span><br/>
After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work<br/>	
							</p>
                            <img src="assets/temdesigner.png" class="img-polaroid"/> <br/><br/>
                            <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>Body  Color</td>
                                            <td>This Will Change Body Background Color</td>
                                        </tr>
									<tr>
                                            <td>Main  Color</td>
                                            <td>This Will Change Primary color (Color 1), Secondary Color (Color II), Third Color (Color III) and Fourth Color (Color IV)</td>
                                        </tr>
                                        <tr>
                                            <td>Page Text</td>
                                            <td>This will change Main/Body Font Type, Heading font type, and Text Color</td>
                                        </tr>
                                        <tr>
                                            <td>Links</td>
                                            <td>This will change Link color, Hover link Color and visited link color</td>
                                        </tr>
                                        <tr>
                                            <td>Header</td>
                                            <td>This will change Blog title font type, Blog description font type, Blog Title Color, and Blog description Color</td>
                                        </tr>
										<tr>
                                            <td>Navigation 1</td>
                                            <td>This will Change Top Gradient Background Color, Bottom Gradient Background Color, Inset shadow color and Outset shadow Color</td>
                                        </tr>
										<tr>
                                            <td>Navigation 2</td>
                                            <td>This will change Sub Menu Color, Sub Sub Menu Color Color, and Menu Text Color</td>
                                        </tr>
										<tr>
                                            <td>Search Input</td>
                                            <td>This will change Search input border color and Search Input text Color</td>
                                        </tr>										
										<tr>
                                            <td>Content Area</td>
                                            <td>This will change Content Area background color</td>
                                        </tr>
										<tr>
                                            <td>Posting Area</td>
                                            <td>This will change Blog Post Title Color, Blog Post Hover Title Color, Top gradient Read More Button and Bottom gradient Read More Button</td>
                                        </tr>
										<tr>
                                            <td>Sidebar Area</td>
                                            <td>This will change Text color, Sidebar Widget Heading Background Color, and Sidebar Widget Heading Text color</td>
                                        </tr>
										<tr>
                                            <td>Footer Area</td>
                                            <td>This will change footer text color, footer heading background color and footer hover link color</td>
                                        </tr>										
										<tr>
                                            <td>Page Navigation Button</td>
                                            <td>This will change Page navigation text color, border color, top gradient background color and bottom gradient background color</td>
                                        </tr>
										<tr>
                                            <td>Page Navigation Button 2</td>
                                            <td>This will change page navigation hover button border color, hover top gradient background color, hover bottom gradient background and active button background color</td>
                                        </tr>
										<tr>
                                            <td>Image and Comment</td>
                                            <td>This will change image/comment/readmore border color, background color, footer image border color and footer image background color. </td>
                                        </tr>	
										<tr>
                                            <td>Featured Widget</td>
                                            <td>This will change featured widget background color, shadow color, fetured button text color</td>
                                        </tr>			
										<tr>
                                            <td>Featured Widget Button</td>
                                            <td>This will change featured widget button top gradient background color, bottom gradient background color and dots background color</td>
										</tr>
										<tr>
                                            <td>Comment Widget</td>
                                            <td>This will change comment date top background color, bottom background color, and date text color</td>
										</tr>	
										<tr>
                                            <td>Input</td>
                                            <td>This will change Input top gradient background color, bottom gradient background color, text color and border color</td>
										</tr>										
                                    </tbody>
                                </table> 
                            </section>                     
                                                           


                              

                                       
                                       <hr />

                                       <div class="goodbye">
                                        <p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p>
                                    </div>

                                    <hr />

                                    <footer>
                                        <p>&copy; satankmkr 2013</p>
                                    </footer>

                                </div>
                                <!-- ========================= MAIN CONTAINER >> END ========================= -->


                                <!-- CHANGELOG >> START -->
                                <div class="modal hide fade" id="changelog" tabindex="-1" role="dialog" aria-labelledby="changelog-label" aria-hidden="true">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h3 id="changelog-label">Changelog</h3>
                                    </div>
                                    <div class="modal-body">

                                        <!-- Code Block >> Start -->                   
                                        <pre>Current version 1.1:
Fixed: Load More Post
Fixed: Summary Script
Fixed: Google Rich Snippet Error.
            <!-- +   Addition
            ^   Change
            -   Removed
            *   Security Fix
            #   Bug Fix
            !   Note</pre>
            <!-- Code Block >> End --> 

            <!-- Code Block >> Start -->                   
        </pre>
        <!-- Code Block >> End -->                   

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
<!-- CHANGELOG >> END -->



<!-- CREDITS >> START -->
<div class="modal hide fade" id="credits" tabindex="-1" role="dialog" aria-labelledby="credits-label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="credits-label">Credits</h3>
    </div>
    <div class="modal-body">
        <p>I've used the following images, icons or other files as listed.</p>
        <h3>JavaScript</h3>
        <ol>		   		  
		   <li><a href="https://plus.google.com/108949996304093815163/about">Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman</a></li>
		   <li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Superfish v1.7.2 by Joel Birch</a></li>	
		   <li><a href="http://logicbox.net/jquery/simplyscroll/">jQuery simplyScroll 2.0.5 by Will Kelly </a></li>	
		   <li><a href="http://sorgalla.com/jcarousel/">jCarousel 0.2.9 by Jan Sorgalla</a></li>
		   <li><a href="http://thiagosf.net/projects/jquery/skitter/">jQuery Skitter Slideshow ver. 4.2.1 by Thiago Silva Ferreira</a></li>		   
       </ol>      
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<!-- CREDITS >> END -->

<!-- loading javascripts -->
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>

<!-- init javascripts -->
<script src="assets/js/init.js"></script>

</body>

</html>
